<template>
  <view class="detail">
    <view class="status_bar"></view>
    <view class="header">
      <view class="header-icon" @click="BackEvent">
        <u-icon class="icon" name="arrow-left"></u-icon>
      </view>
      <u-select class="moreSelect" v-model="moreShow" :list="moreList" @confirm="moreConfirm"></u-select>
      <view class="header-icon" @click="moreShowEvent">
        <u-icon class="icon" name="more-dot-fill"></u-icon>
      </view>
    </view>
    <view class="bgImg">
      <image :src="detail.vod_pic" mode="aspectFill"></image>
    </view>
    <view class="boxImg">
      <view class="boxImgWrapper">
        <image :src="detail.vod_pic" mode="aspectFit"></image>
      </view>
    </view>
    <view class="box-info">
      <view class="star-btn" @click="starEvent">
        <u-icon v-if="!starShow" name="star" size="60"></u-icon>
        <u-icon v-if="starShow" name="star-fill" color="#ff4445" size="60"></u-icon>
      </view>
      <view class="play-btn" @click="playConfirm(playList[0],0)">
        <u-icon name="play-circle" color="#096" size="80"></u-icon>
      </view>
      <view class="name-box">
        <text class="name">{{ detail.vod_name }}</text>
      </view>
      <view class="info-box">
        <text>{{ detail.vod_area }}</text>
        <text class="gap">|</text>
        <text>{{ detail.vod_lang }}</text>
        <text class="gap">|</text>
        <text>{{ detail.type_name }}</text>
        <text class="gap">|</text>
        <text>{{ detail.vod_year }}</text>
      </view>
      <view class="info-box">
        <text>导演: {{ detail.vod_director }}</text>
      </view>
      <view class="info-box">
        <text>演员: {{ detail.vod_actor }}</text>
      </view>
      <view class="info-box">
        <text>简介:</text>
        <u-parse :html="detail.vod_content"></u-parse>
      </view>
      <view class="paly-list">
        <u-tag :text="item.label" :mode="current == index?'dark':'plain'" v-for="(item,index) in playList" :key="index"
          @click="playConfirm(item,index)" />
      </view>
    </view>
    <view>
      <u-select v-model="playShow" :list="playList" confirm-text="播放" @confirm="playConfirm"></u-select>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import db from "../../utils/database.js";
  import http from "../../utils/request.js";
  export default {
    data() {
      return {
        siteKey: "",
        id: "",
        detail: {},
        moreShow: false,
        moreList: [{
          value: "share",
          label: "分享",
        }],
        playShow: false,
        current: 0,
        playList: [],
        starShow: false
      };
    },
    onLoad(opt) {
      this.siteKey = opt.site
      this.id = opt.id
      this.getDetail(opt.site, opt.id)
      this.checkStar()
    },
    methods: {
      BackEvent() {
        uni.navigateBack();
      },
      moreShowEvent() {
        this.moreShow = !this.moreShow;
      },
      async moreConfirm(e) {
        const val = e[0].value;
        if (val === "share") {}
        if (val === "star") {
          let s = { ...this.detail }
          s.key = `${this.siteKey}-${this.id}`
          const res = await db.add('star', s)
          if (res.flag) {
            this.$refs.uToast.show({
              title: '收藏成功',
              type: 'success',
              duration: '2300'
            })
          }
        }
      },
      async playConfirm(obj, index) {
        this.current = index
        const url =
          `/pages/play/play?site=${obj.extra.site}&id=${obj.extra.id}&name=${obj.label}&url=${obj.value}&cur=${index}`;
        await this.addHistory(obj.label, obj.value)
        this.$u.route({ url: url });
      },
      async addHistory(label, url) {
        let h = { ...this.detail }
        h.key = `${this.siteKey}-${this.id}`
        const res = await db.get('history', `${this.siteKey}-${this.id}`)
        if (!res.flag) {
          h.label = label
          h.url = url
          await db.add('history', h)
        }
      },
      async getDetail(key, id) {
        const res = await http.detail(key, id)
        // console.log(res)
        this.detail = res.data
        const arr = []
        let num = 1
        // console.log(res.m3u8List)
        for (const i of res.m3u8List) {
          const j = i.split('$')
          let rowIndex = arr.length + 1
          let label = res.m3u8List.length > 1 ? `第${rowIndex.toString().padStart(3,0)}集` : this.detail.vod_name
          if (j.length > 1) {
            for (let m = 0; m < j.length; m++) {
              if (j[m].indexOf('.m3u8') >= 0 && j[m].startsWith('http')) {
                let d = {
                  index: i,
                  value: j[m],
                  label: label,
                  extra: {
                    site: key,
                    id: id,
                  }
                }
                // console.log(d.label)
                arr.push(d);
                break
              }
            }
          } else {
            let d = {
              index: i,
              value: j[0],
              label: label,
              extra: {
                site: key,
                id: id,
              }
            }
            arr.push(d)
          }
        }
        this.playList = arr
      },
      async checkStar() {
        const res = await db.get('star', `${this.siteKey}-${this.id}`)
        this.starShow = res.flag
      },
      async removeStar() {
        const res = await db.remove('star', `${this.siteKey}-${this.id}`)
        if (res.flag) {
          this.$refs.uToast.show({ title: '移除收藏成功', type: 'success', duration: '1500' })
        } else {
          this.$refs.uToast.show({ title: '移除收藏失败', type: 'warning', duration: '1500' })
        }
        this.checkStar()
      },
      async addStar() {
        let s = { ...this.detail }
        s.key = `${this.siteKey}-${this.id}`
        const res = await db.add('star', s)
        if (res.flag) {
          this.$refs.uToast.show({ title: '添加收藏成功', type: 'success', duration: '1500' })
        } else {
          this.$refs.uToast.show({ title: '添加收藏失败', type: 'warning', duration: '1500' })
        }
        this.checkStar()
      },
      starEvent() {
        if (this.starShow) {
          this.removeStar()
        } else {
          this.addStar()
        }
      }
    },
  }
</script>
<style lang="scss" scoped>
  .detail {
    .status_bar {
      height: var(--status-bar-height);
      width: 100%;
    }

    .header {
      position: absolute;
      top: var(--status-bar-height);
      left: 0;
      padding: 0 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 2;
      width: 100%;
      margin-top: 10px;

      .header-icon {
        width: 30px;
        height: 30px;
        background-color: rgba(255, 255, 255, 0.7);
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
      }
    }

    .bgImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 0;
      filter: blur(3px);

      image {
        width: 100%;
        height: 50vh;
      }
    }

    .boxImg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1;

      .boxImgWrapper {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 55vh;

        image {
          width: auto;
          height: 40vh;
          margin: 0 auto;
          min-width: 550upx;
          background-color: #FFFFFF;
          border: 3px solid #fff;
          border-radius: 15px;
          box-shadow: 0px 0px 20px #acacac;
        }
      }
    }

    .box-info {
      width: 100%;
      height: auto;
      padding: 40px 30px;
      border-radius: 30px;
      background-color: #FFFFFF;
      position: absolute;
      margin-top: 50vh;
      z-index: 1;

      .star-btn {
        position: absolute;
        top: -60rpx;
        right: 240rpx;
        padding: 20rpx;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 1px solid #f8f8f8;
      }

      .play-btn {
        position: absolute;
        top: -80rpx;
        right: 100rpx;
        padding: 20rpx;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 1px solid #f8f8f8;
      }

      .paly-list {
        margin-top: 10px;

        .u-tag {
          margin: 5px;
          padding: 10px;
        }
      }

      .name-box {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .name {
          font-size: 40rpx;
        }
      }

      .info-box {
        margin-top: 20rpx;

        .gap {
          margin: 0 10rpx;
        }
      }
    }
  }
</style>